<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>课程详情</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/iconfont/font_0/iconfont.css">
    <link rel="stylesheet" href="/css/style.css">
    <style>
    html,
    body {
        height: 100%;
    }

    body>.wrap-cc {
        min-height: 100%;
    }

    .content-cc {
        /* padding-bottom 等于 footer 的高度 */
        padding-bottom: 80px;
    }

    .footer-cc {
        width: 100%;
        height: 80px;
        /* margin-top 为 footer 高度的负值 */
        margin-top: -80px;
    }
    </style>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/template-web.js"></script>
    <script src="/js/sweetalert.js"></script>
    <script>
    var count = 0;
    $(function() {
        $(".title-ul>li").on('click', function() {
            $(this).addClass('current').siblings().removeClass("current");
        });
        $('.addPraise').bind('click', function(){
            swal('点赞成功');
        });
        alert('${resource.path}');
        //页面加载时加载第一页评论
        loadComs(1);
        //错误信息弹窗
        var msg = '${errorMsg}';
        if(msg){swal(msg);}
        loadRecCourse();
    });
    
	    /**
	    *评论加载功能
	    */
    	function loadComs(pageNo){
    	if(pageNo == 0 ||!pageNo){swal("没有更多评论了哟");return;}
    	var resource_id = $("#resource_id_holder").val();

    		$.ajax(
	        {
	        	url:'/comment/loadResComs.do',
	        	data:
	        	{
	        		"resource_id":resource_id,
	        		"pageNo":pageNo
	        	},
	        	type:'post',
	        	success:function(data)
	        	 {
	        		var coms = data.obj.list;
	        		var info = data.obj;
	        		var html = template("userComs", {d : coms});
	        		$("#before-load-more").before(html);
	        		$("#nextPage-num").attr("nextPageNo",info.nextPage);
	 			 }
	        });
    	}
    	
    	/**
    	*加载更多评论的方法
    	*/
    	function showMore(item){
    		let pageNo = $("#nextPage-num").attr("nextPageNo");
    		loadComs(pageNo);
    	}
    	/**
    	*发表评论 方法
    	*/
    	function commitCom(id){
    		let context = $("#comment-context").val();
    		$.ajax(
    		{
    			url:'/comment/sendComs.do',
    			data:{"resource_id":id,"context":context},
    			type:'post',
    			success:function(data)
    			{
    				swal(data.msg);

                    $(".loadComment").html(""); //清空评论区
                    loadComs(1);         //重新加载评论

    			}
    		});
    	}
    	/**
    	*加载当前课程所在类别下点击量前三多的课程
    	*/
    	function loadRecCourse()
    	{
    		var course_id = $("#course_id_holder").val();
    		$.ajax(
    		{
    			url:'/course/loadRecCourse.do',
    			data:{"course_id":course_id},
    			type:'post',
    			success:function(data)
    			{
    				var top3s = data.obj;
    				var html = template("top3Courses", {c : top3s});
    				$(".col-md-3").append(html);
    			}
    		});
    	}
    	/**
    	*点赞/取消暂功能
    	*/
    	function getCount(comment_id,item){
    		$.ajax(
    		{
    			url:'/comment/getPraCount.do',
    			data:{"comment_id":comment_id},
    			type:'post',
                dataType:"json",
    			success:function(data)
    			{
    			    console.log(data.obj);
    				if(data.success){
    					$(item).next().html(data.obj);
    				}
    			}
    		});
    	}
    	
    	/**
    	*点赞/取消暂功能
    	*/
    	function doPraise(comment_id,item)
    	{
    		$.ajax(
    		{
	    		url:'/praise/tgPraise.do',
	    		data:{"comment_id":comment_id},
	    		type:'post',
                dataType:"json",
	    		success:function(data)
	    		{
	    			if(data.success){

	    			swal("点赞成功！");
	    			$(item).addClass("current");
	    			getCount(comment_id,item);
	    			return;
	    			}
                    console.log("来 false了="+data);
	    			$(item).removeClass("current");
	    			getCount(comment_id,item);
	    		}
    		});
    	
    	}
    </script>

    <script>

        $(function() {
            //加载上方的一级类型
            loadFirstCourseType();
            //最新,最热
            $(".tool-left>a").on('click', function() {
                $(this).addClass('present').siblings().removeClass("present");
            })
            $(".tool-iseasy>a").on('click', function() {
                $(this).addClass('active').siblings().removeClass("active");
            })
            var state = 0;
            $(".tool-chk").click(function() {
                if (state == 0) {
                    $(".tool-chk").css({
                        "background": "url(images/sw-on.fw.png) no-repeat"
                    });
                    state = 1;
                } else {
                    $(".tool-chk").css({
                        "background": "url(images/sw-off.png) no-repeat"
                    });
                    state = 0;
                }
            })
            loadCourses(1);//页面加载打印第一页
        })

        function Type2(item){

            $(item).parent().addClass("on").siblings().removeClass("on");
        }

        function TypeWeb(item){
            $(item).parent().addClass("on").siblings().removeClass("on");
            $("#firstRow").show();
            $("#secondRow").show();
        }
        function TypePerson(item){
            $(item).parent().addClass("on").siblings().removeClass("on");
            $("#firstRow").hide();
            $("#secondRow").hide();
        }


        //第一个“全部按钮”，课程查询
        function Type1All(item){
            typeId = null;
            type1Id = null;
            $(item).parent().addClass("on").siblings().removeClass("on");
            $("#secondTypeItemLi").nextAll().remove();
            $("#CourseTypeItemDiv").empty();
            loadCourses(1,0);//按按钮显示第一页
        }
        //点击下一页
        function nextPage(){
            pageNo = $("#nextPageBtn").attr("pageNo");
            $("#CourseTypeItemDiv").empty();
            loadCourses(pageNo,typeId);
        }
        //点击上一页
        function prePage(){
            pageNo = $("#prePageBtn").attr("pageNo");
            $("#CourseTypeItemDiv").empty();
            loadCourses(pageNo,typeId);
        }

        //分页查询课程
        function loadCourses(pageNo,id){
            $.ajax({
                url:'/course/findAllCourse.do',
                data:{
                    "pageNo":pageNo,
                    "course_type_id":id
                },
                dataType:'json',
                type:'post',
                success:function(data){

                    var html = template('courseList',{"list": data});
                    $(".pager-cur").html(pageNo);
                    $(".pager-total").html(data.pages);
                    $("#CourseTypeItemDiv").append(html);
                    pageNoNext = pageNo-"0"+1;//运行一次就加1,赋值到下面，给再下次点击它时用(下一页)
                    pageNoPre = pageNo-"0"-1;//运行一次就减1,赋值到下面，给再下次点击它时用(上一页)
                    if (data.isLastPage) {
                        //到底
                        $("#nextPageBtn").attr("pageNo",data.pages);
                        return
                    }
                    $("#nextPageBtn").attr("pageNo",pageNoNext);
                    //最前
                    if (data.isFirstPage) {
                        $("#prePageBtn").attr("pageNo",data.firstPage);
                        return
                    }
                    $("#prePageBtn").attr("pageNo",pageNoPre);
                }
            });
        }

        //组合查询
        var typeId = null;
        var type1Id = null;

        function Type1(item,id){
            typeId = id;
            type1Id = id;
            $(item).parent().addClass("on").siblings().removeClass("on");
            $.ajax({
                url:'/ct/findByParentId.do',
                data:{
                    "parent_id":id
                },
                dataType:'json',
                type:'post',
                success:function(data){
                    var html = template('secondTypeList',{"list": data});
                    $("#secondTypeItemLi").nextAll().remove();
                    $("#secondTypeItemLi").after(html);
                }
            });

            $("#CourseTypeItemDiv").empty();
            loadCourses(1,id);
        }
        function Type2(item,id){
            if(id==null || id==undefined){
                id = type1Id;
                typeId = id;
            }else{
                typeId = id;
            }
            $(item).parent().addClass("on").siblings().removeClass("on");
            $("#CourseTypeItemDiv").empty();
            loadCourses(1,id);
        }
        //加载第一行类型
        function loadFirstCourseType(){
            $.ajax({
                url:'/ct/findCourseType.do',
                dataType:'json',
                type:'post',
                success:function(data){
                    var html = template('firstTypeList',{"obj": data});
                    $("#firstTypeItemLi").after(html);
                }
            });
        }
    </script>
    <!--页面头部分js开始-->
    <script>
        $(function(){
            showSumA();
            $(".signBtn").click(function() {
                $(".expe").show().addClass('animated forward fadeOutUp');

                $(".signBtn").html("已签到").unbind("click").addClass('gray').removeClass('hoverRed');

            });


            var isLogin = true;
            if (${sessionUser == null }) {
                isLogin = false;
            }
            console.log('${sessionUser.login_name}');
            changeUserDiv(isLogin);

            var msg = '${errorMsg}';
            if(msg){alert(msg);}

            $("#head-form").show();
            if(location.href=='http://localhost/gp/front_record'){
                $("#head-form").hide();
            }
        });

        //前台显示用户剩余积分和金币
        function showSumA(){
            $.ajax({
                url : '/gp/findFrontSumByUid',
                type : 'post',
                dataType : 'json',
                success : function(data){
                    $("#pointSum").html(data.obj.sum_point_count);
                    $("#goldSum").html(data.obj.sum_gold_count);
                }
            })
        }

        //签到后更新时间 ajax
        function loginDate(id){
            // alert("签到方法执行")
            $.ajax({
                url:'/user/updateLoginDate.do',
                data:{
                    "id":id
                },
                dataType:'json',
                type:'post',
                success:function(data){
                    showSumA();
                }
            });
        }

        function openUserModal(isRegist) {
            if (isRegist) { //是注册
                $("#regist_modal").modal("show");
                return;
            }
            //是登录
            $("#login_modal").modal("show");
        }

        function changeUserDiv(isLogin) {
            // alert("进去changeUserDiv"+isLogin);
            if (isLogin) { //
                $("#loginOff").hide();

                $("#loginOn").show();
                $("#login_modal").modal("hide");

                //判断是否需要签到
                $.ajax({
                    url:'/user/findLoginDate.do',
                    dataType:'json',
                    type:'get',
                    success:function(data){
                        if (!data) {
                            $(".signBtn").html("已签到").unbind("click").addClass('gray').removeClass('hoverRed');
                        }
                    }
                });


            } else {
                $("#loginOn").hide();
                $("#loginOff").show();
            }
        }

        //执行登录
        function doLogin(){
            $("#errMsg").text("");
            var login_name = $("#login_modal [name=login_name]").val();
            var password = $("#login_modal [name=password]").val();
            if(login_name == ""){
                $("#errMsg").text("用户名不能为空");
                return false;
            }

            if(password == ""){
                $("#errMsg").text("密码不能为空");
                return false;
            }

            $.ajax({
                url:'/user/loginFront',
                data:{
                    "login_name":login_name,
                    "password":password
                },
                type:'post',
                dataType:'json',
                success:function(data) {
                    if(data.success){
                        var isLogin = true;
                        location.href="/login";
                        changeUserDiv(isLogin);
                    }else{
                        $("#errMsg").text("用户名或者密码错误");
                    }
                }
            });
        }

        //修改用户信息时，校验旧密码
        function  checkPassword(pwd){
            if (pwd != $("#modifyForm [name=password]").val() ) {
                var $span = $("#modifyForm [name=password]").parent().find("span");
                $span.html("旧密码输入有误，请重新输入")
                $span.css("color","red");
                $("#modifyForm [name=password]").empty();
                $("#modifyForm [name=password]").focus();
            }
            if (pwd == $("#modifyForm [name=password]").val() ) {
                var $span = $("#modifyForm [name=password]").parent().find("span");
                $span.html("旧密码输入正确");
                $span.css("color","green");
                $("#modifyForm [name=newPassword]").focus();
            }
        }
        ////修改用户信息时，重复新密码校验
        function checkRePassword() {
            var $span = $("#modifyForm [name=rePassword]").parent().find("span");
            $span.html("")
            var str = $("#modifyForm [name=newPassword]").val();
            var reg = /^[A-Za-z0-9_-]+$/ig;
            if (!reg.test(str)) {
                $span.html("密码不能有空格和特殊字符")
                $span.css("color", "red");
                $("#modifyForm [name=newPassword]").focus();
                return;
            }

            if ($("#modifyForm [name=rePassword]").val() != $("#modifyForm [name=newPassword]").val()) {
                // var $span = $("#modifyForm [name=rePassword]").parent().find("span");
                $span.html("两次密码输入不一致，请重新输入")
                $span.css("color", "red");
                $("#modifyForm [name=rePassword]").val().empty();
                $("#modifyForm [name=newPassword]").val().empty();
                $("#modifyForm [name=newPassword]").focus();
            }
            if ($("#modifyForm [name=rePassword]").val() == $("#modifyForm [name=newPassword]").val()) {
                // var $span = $("#modifyForm [name=rePassword]").parent().find("span");
                $span.html("密码输入一致")
                $span.css("color", "green");
                $("#modifyForm [name=nickname]").focus();
            }

        }
        //修改用户信息时校验昵称
        function checkModifyNickname() {
            var str = $("#modifyForm [name=nickname]").val();
            var reg = /^.{1,60}$/ig;
            if (!reg.test(str)) {
                $("#modifyBtn").attr("disabled",true);
                var $span = $("#modifyForm [name=nickname]").parent().find("span");
                $span.html("昵称不能为空且不超过30个字符")
                $span.css("color", "red");
                $("#modifyForm [name=nickname]").focus();
            }else{
                $("#modifyBtn").attr("disabled",false);
                var $span = $("#modifyForm [name=nickname]").parent().find("span");
                $span.html("")
                $span.css("color", "green");
            }
        }
        //修改用户信息时校验email
        function checkModifyEmail() {
            var email = "${sessionUser.email}";
            if($("#modifyForm [name=email]").val()==email){
                $("#modifyForm [name=email]").parent().find("span").html("");
                $("#modifyBtn").attr("disabled",false);
                return;
            }
            $("#modifyBtn").attr("disabled",true);
            $.ajax({
                url:"/user/checkEmail",
                data:{"email":$("#modifyForm [name=email]").val()},
                type:"get",
                success:function (data) {
                    $("#modifyBtn").attr("disabled",!data.success);
                    var $span = $("#modifyForm [name=email]").parent().find("span");
                    $span.html(data.msg)
                    if(!data.success){
                        $span.css("color", "red");
                        $("#modifyForm [name=email]").focus();
                    }
                }
            });
        }
    </script>
    <!--页面头部分js结束-->



    <script type="text/html" id="top3Courses">
		{{ each c  item }}
    		<div class="row recommd-course">
           	   <div class="col-md-4">
                	<img src="/images/timg.jpg" alt="">
        	   </div>
         	   <div class="col-md-8">
         	        <div>
						<a href="/chapter/showChapterFront.do?course_id={{item.id}}">{{item.course_name}}</a>
					</div>
         	        <div>{{item.course_info}}</div>
          	   </div>
     	   </div>
		{{/each}}
    </script>
    
    <script  type="text/html" id="userComs">
	{{ each d  item }}
		<li class="loadComment">
             <div class="row comment-area">
                 <div class="col-md-1"><img src="/images/user.jpeg" alt="" class="img-circle " width="35" height="35"></div>
                 <div class="col-md-10 comment-info">
                     <div class="col-md-12">{{item.nickname}}</div>
                     <div class="col-md-12">{{item.context}}</div>
                     <div class="col-md-12">
                         <div>
                             时间：<span>{{item.create_date}}</span>
                         </div>
                         <div>
                             <span>举报</span>
                             <span class="addPraise" >
								<i class="icon iconfont icon-zan" onclick="doPraise({{item.id}},this)"></i>
							 	<span>{{item.praise_count}}</span>
							 </span>
                         </div>
                     </div>
                 </div>
             </div>
         </li>
		{{/each}}
	</script>
    
</head>

<body>
	<!-- idHolders -->
	<input type="hidden" id="course_id_holder" value="${course_id}"/>
	<input type="hidden" id="resource_id_holder" value="${resource.id}"/>
    <div class="wrap-cc">
        <div class="content-cc">

            <!--页面头，登录注册部分开始-->
            <nav class="navbar navbar-default">
                <div class="container-fluid" style="background: #fff;box-shadow: 5px 5px 5px #eef;padding-left: 20px;">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <!--  <a class="navbar-brand" href="#">Brand</a> -->
                        <img src="/images/com-logo1.png" alt="" width="120" style="margin-right: 20px;">
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li><a href="/front_index" class="vertical-middle">免费课程</a></li>
                            <li><a href="#" class="vertical-middle">职业路径</a></li>
                        </ul>
                        <!--搜索框-->
                        <form id="head-form" action="/front_select" class="navbar-form navbar-left searchInput" style="padding:10px;">
                            <div class="form-group">
                                <input class="" placeholder="Search" name="course_name">
                            </div>
                            <button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-search"></span></button>
                        </form>

                        <div id="loginOff" class="regist ccc">
                            <span style="margin-right: 20px;font-size: 14px;">下载APP</span>
                            <a href="javascript:openUserModal(false);" class="ccc"  id="loginbt">登录</a> &nbsp;&nbsp;/&nbsp;&nbsp;
                            <a href="javascript:openUserModal(true);" class="ccc">注册</a>
                        </div>


                        <ul id="loginOn" class="nav navbar-nav navbar-right">
                            <li class="nav navbar-nav signIn">
                                <div class="signBtn hoverRed" onclick="loginDate(${sessionUser.id })">签到</div>
                                <div class="expe">+5经验值</div>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle user-active" data-toggle="dropdown" role="button">
                                    <img class="img-circle" src="/images/user.jpg" id="userImg">
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu userinfo cc">
                                    <li>
                                        <img src="/images/user.jpg" class="img-circle" alt="">
                                        <div class="">
                                            <p>${sessionUser.nickname} </p>
                                            <p>金币<span id="goldSum"></span>&nbsp;积分 <span id="pointSum"></span></p>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="/course/findAllCourseForFront.do">
                                            <i class="glyphicon glyphicon-edit"></i>我的课程
                                        </a>
                                        <a href="/gp/front_record.do">
                                            <i class="glyphicon glyphicon-record"></i>积分记录
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" data-toggle="modal" data-target="#userSet">
                                            <i class="glyphicon glyphicon-cog"></i>个人设置
                                        </a>
                                        <a href="/user/loginOut1.do"><i class="glyphicon glyphicon-off"></i>退出登录</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>

                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
            <div class="modal fade" id="userSet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">个人信息</h4>
                        </div>
                        <form id="modifyForm" action="/user/modifyUser.do"  class="form-horizontal" method="post">
                            <input type="hidden" name="id" value="${sessionUser.id }">
                            <div class="modal-body">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">旧密码：</label>
                                    <div class="col-sm-6">
                                        <input onblur="checkPassword(${sessionUser.password })" class="form-control" type="password" name="password" />
                                        <br/>
                                        <span style="color:red"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">新密码：</label>
                                    <div class="col-sm-6">
                                        <input class="form-control" type="password" name="newPassword" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">确认密码：</label>
                                    <div class="col-sm-6">
                                        <input onblur="checkRePassword()" class="form-control" type="password" name="rePassword" />
                                        <br/>
                                        <span style="color:red"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">昵称：</label>
                                    <div class="col-sm-6">
                                        <input onblur="checkModifyNickname()" class="form-control" type="text" name="nickname" value="${sessionUser.nickname }"/>
                                        <br/>
                                        <span style="color:red"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">邮箱：</label>
                                    <div class="col-sm-6">
                                        <input onblur="checkModifyEmail()" class="form-control" type="text" name="email"  value="${sessionUser.email }"/>
                                        <br/>
                                        <span style="color:red"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                                <button type="reset" class="btn btn-info">重&nbsp;&nbsp;置</button>
                                <button id="modifyBtn" onclick="changeUserInfo()" type="button" class="btn btn-info">确&nbsp;&nbsp;定</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- regist modal -->
            <div class="modal fade" id="regist_modal" tabindex="-1" role="dialog" aria-labelledby="myRegistLabel">
                <div class="modal-dialog modal-md" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myRegistLabel">注册</h4>
                        </div>
                        <form id="registForm" action="#" class="form-horizontal" method="post">
                            <div class="modal-body">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">登录名：</label>
                                    <div class="col-sm-6">
                                        <input onblur="checkName()" class="form-control" type="text" name="login_name" />
                                        <br/>
                                        <span style="color:red"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">密码：</label>
                                    <div class="col-sm-6">
                                        <input class="form-control" type="password" name="password" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">确认密码：</label>
                                    <div class="col-sm-6">
                                        <input onblur="checkRegistPassword()" class="form-control" type="password" name="rePassword" />
                                        <br/>
                                        <span style="color:red"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">昵称：</label>
                                    <div class="col-sm-6">
                                        <input onblur="checkNickname()" class="form-control" type="text" name="nickname" />
                                        <br/>
                                        <span style="color:red"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">邮箱：</label>
                                    <div class="col-sm-6">
                                        <input onblur="checkEmail()" class="form-control" type="text" name="email" />
                                        <br/>
                                        <span style="color:red"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                                <button id="registBtn" type="button" onclick="doRegist()" class="btn btn-info">注&nbsp;&nbsp;册</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- login modal -->
            <div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="myLoginLabel" ">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myLoginLabel">登录</h4>
                    </div>
                    <form  class="form-horizontal" >
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">登录名：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="text" name="login_name" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">密码：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="password" name="password" />
                                </div>
                            </div>
                            <div style="text-align:center">
                                <span id="errMsg" style="color:red">${errMsg1 }</span>
                                <span style="color:red">${errMsg2 }</span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                            <button type="button" class="btn btn-info" onclick="doLogin()">登&nbsp;&nbsp;录</button>
                        </div>
                    </form>
                </div>
            </div>
            </div>
            <!--页面头，登录注册部分结束-->


            <nav class="navbar navbar-default">
                <div class="collapse navbar-collapse" >
                    <ul class="nav navbar-nav">
                        <li>
	                        <a onclick="history.back()" class="vertical-middle">
	                        	<i class="glyphicon glyphicon-menu-left"></i>
	                        </a>
                        </li>
                        <li class="vertical-middle text-color"> ${resource.title}</li>
                        <li class="vertical-middle little-title">${path}</li>
                    </ul>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
            <div class="container-fluid padding-0 bgColor">
                <video style="width: 100%; height:470px;" controls="controls">
					${resource}
					
                    <source src="/${resource.path}">
                </video>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-9">
                        <ul class="title-ul">
                            <li class="current">评论</li>
                            <li>问答</li>
                            <li>笔记</li>
                        </ul>
                        <div class="row comment-area">
                            <div class="col-md-1"><img src="/images/user.jpeg" alt="" class="img-circle " width="35" height="35"></div>
                            <div class="col-md-9">
                                <textarea id="comment-context" cols="70" rows="10" style="resize:none;"></textarea>
                            </div>
                            <div class="col-md-2 col-md-offset-10 ">
                                <button class="btn btn-success" onclick="commitCom(${resource.id})">发表评论</button>
                            </div>
                        </div>
                        <ul id="commentDetail" class="margin-bottom-90">
                            <!-- 此处为评论显示区域 -->
                            <li  id = "before-load-more" >
                                <div class="load-more">
                                    <span id="nextPage-num" onclick="showMore(this)" >加载更多...</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3" >
                        <div class="row teacher-msg">
                            <div class="col-md-12 course-title padding-30">推荐课程</div>
                        </div>
                        <!-- 此处为推荐课程展示区 -->
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-cc">
        <div class="footer">
            <div>
            </div>
            <div>
                Copyright © 2018 imooc.com All Rights Reserved | 京ICP备 13046642号-2
            </div>
        </div>
    </div>
    
    
</body>

</html>